<template>
  <div class="toast" data-autohide="false" style="box-shadow: 0 0 10px #7a81a9">
    <div
      class="toast-header d-flex align-items-center"
      style="background-color: #007bff; color: white"
    >
      <i
        class="bi bi-exclamation-circle-fill mr-1"
        style="font-size: 10px; vertical-align: middle; line-height: 1"
      ></i>
      <h4 class="m-0 text-nowrap text-truncate" style="vertical-align: middle; font-size: 15px">
        很抱歉
      </h4>
      <button class="close" @click="closeToast">&times;</button>
      <!--      <button class="close">&times;</button>-->
    </div>
    <div class="toast-body" style="background-color: #809dc0; color: white"><slot></slot></div>
  </div>
</template>

<script setup>
import $ from 'jquery'
import { onMounted, watch } from 'vue'
import { useToastStore } from '@/stores/toastStore.js'

const toastStore = useToastStore()
const closeToast = () => {
  $('.toast').toast('hide')
  toastStore.setTrigger(false)
}

const openToast = () => {
  $('.toast').toast('show')
}

watch(
  () => toastStore.Toast.trigger,
  (newVal) => {
    if (newVal === true) {
      openToast()
    }
  },
)
</script>

<style>
.toast {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30vw;
  z-index: 2;
}
</style>
